<template>
  <div class="productTestFpy">
    <div id="productTestFpyData"></div>
    <div class="nodata2" v-if="!productTestFpy.length">暂无数据</div>
  </div>
</template>
<script>
import {req} from "../../../api/axiosFun";
import TableTootip from "../../../components/TableTootipHome";
import {nowSize} from '../../../until'

export default {
  props:['productTestFpyDate'],
  components:{
    TableTootip
  },
  data() {
    return{
      titleList:['合格率'],
      productTestFpy:[],
      myChart: null,
    }
  },
  watch:{
    productTestFpyDate(val){
      this.getProductTestFpy(val)
    }
  },
  mounted() {
    this.getProductTestFpy(this.productTestFpyDate)
    this.myChart = this.$echarts.init(document.getElementById('productTestFpyData'));
  },
  methods:{
    //当月各工序日计划完成率排名
    getProductTestFpy(date) {
      req('post', `dataBoard/getProductTestFpy`,{date})
        .then(res => {
          if (res.result === 'success') {
            this.productTestFpy = res.data.fpy
            this.initChart()
          }
        })
    },
    initChart(){
      this.myChart.clear()
      var dateList = [],
        ratioList = [],
        titleList= this.titleList
      if(this.productTestFpy.length){
        this.productTestFpy.forEach(item=>{
          var date = item.reportDatetime.substring(8,10)
          date = date.substring(0,1)=='0'?date.substring(1,2):date
          dateList.push(date+'日')
          ratioList.push(parseFloat(item.ratio))
        })
        var option = {
          color: ['#1890ff'],
          tooltip: {
            trigger: 'axis',
            formatter: function(params) {
              var res = params[0].axisValue;
              for (var i = 0, l = params.length; i < l; i++) {
                if(params[i].seriesName == '合格率'){
                  res += '<br/>' + params[i].marker + " " + params[i].seriesName + ' : ' + params[i].value + '%'
                }else {
                  res += '<br/>' + params[i].marker + " " + params[i].seriesName + ' : ' + params[i].value
                }
              }
              return res;
            },
          },
          // legend: {
          //   data: titleList
          // },
          calculable: true,
          xAxis: [
            {
              type: 'category',
              data: dateList,
              axisLabel: {
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: '合格率',
              axisLabel: {
                formatter: '{value}%',
                fontSize: nowSize(14)
              }
            },
          ],
          grid: {
            left: '3.5%',
            right: '1.5%',
            top: '16%',
            bottom: '9%'
          },
          series: [
            {
              name: titleList[0],
              type: 'bar',
              barWidth: nowSize(12),
              data: ratioList,
            },
          ]
        }
        this.myChart.setOption(option)
      }
    }
  }
}
</script>
<style scoped>
@import "../../../assets/css/maincss.css";
.productTestFpy {
  position: relative;
  height: 235px;
}
#productTestFpyData {
  height: 95%;
}
</style>
